<!--
  * 首页
  * 
  *
-->
<template>
  <div style="margin-bottom: 10px;">

    <!--  顶部用户信息-->
    <a-row>
      <HomeHeader />
    </a-row>
    <!--下方左右布局-->
    <a-row :gutter="[10, 10]">
      <!--第一行左侧-->
      <a-col :span="24" :lg="16">
        <a-row :gutter="[10, 10]">
          <!--黄河水情日报-->
          <a-col :span="24" :lg="24">
            <homeWaterSituationDailyReport title="黄河水情日报"/>
          </a-col>
      
          <!--各类报表-->
          <!-- 市属灌区月度引水量 -->
          <a-col :span="24" :lg="24">
            <areasMonthlyWaterIntake />
          </a-col>
          
        </a-row>
      </a-col>
      <!--第一行右侧-->
      <a-col :span="24" :lg="8">
        <a-row :gutter="[10, 10]">
          <!--全市用水指标-->
          <a-col :span="24" :lg="24">
            <cityWideWaterUseIndicators />
          </a-col>
        </a-row>
      </a-col>
      <!--第二行左侧  -->
      <a-col :span="24" :lg="12">
        <!-- 市属灌溉面积 -->
        <urbanIrrigationArea />
      </a-col>
      <!--第二行右侧  -->
      <a-col :span="24" :lg="12">
        <!-- 市属灌溉面积 -->
        <municipalWaterUtilizationRate />
      </a-col>
    </a-row>
    
    <!-- <irrigatedAreaIndex /> -->
  </div>

    
  

</template>
  <script setup>
import { computed } from 'vue';
import HomeHeader from '../index/components/home-header.vue';
import homeWaterSituationDailyReport from '../index/components/home-water-situation-daily-report.vue';
import areasMonthlyWaterIntake from '../index/components/echarts/areas-monthly-water-intake.vue';
import cityWideWaterUseIndicators from '../index/components/echarts/city-wide-water-use-indicators.vue';
import urbanIrrigationArea  from '../index/components/echarts/urban-irrigation-area.vue';
import municipalWaterUtilizationRate from '../index/components/echarts/municipal-water-utilization-rate.vue';
// 引入灌区首页组件
import irrigatedAreaIndex from '../irrigated-area-index/index.vue';
import { Modal } from 'ant-design-vue';

// 业绩完成百分比
const saleTargetPercent = computed(() => {
  return 75;
});
</script>
  <style lang="less" scoped>
@import './index.less';
</style>
  